﻿
@{
    ViewBag.Title = "SquareIndex";
    Layout = "~/Views/SharedHead/Top-Header.cshtml";


}
@section Styles{
    <link rel="stylesheet" href="~/css/TY-Header.css">
    <link rel="stylesheet" href="~/css/Square.css">
    <link rel="stylesheet" href="~/iconfont/iconfont.css">
    <script src="~/js/jquery-3.6.4.min.js"></script>

    <style>
        .centen-fabu .fabu #WenJianBtn {
            width: 70px;
            height: 40px;
            font-size: 23px;
            background-color: #ffffff; /* Green */
            border: 2px solid #0094ff;
        }

            .centen-fabu .fabu #WenJianBtn:hover {
                background-color: #4CAF50;
                color: white;
            }

        .centen-fabu .fabu input {
            width: 70px;
            height: 40px;
            margin: 0px 7px;
            border-radius: 5px;
            border: none;
        }

        .centen-fabu #quxiao {
            width: 70px;
            height: 40px;
            color: #007BFF;
            background-color: #EBF2FF;
            position: absolute;
            bottom: 20px;
            right: 120px;
        }

        .centen-fabu #tianjiaBtn {
            color: #007BFF;
            background-color: #EBF2FF;
            position: absolute;
            bottom: 20px;
            right: 100px;
        }

        .centen-fabu #fabuBtn {
            color: #ffffff;
            background-color: #007BFF;
            position: absolute;
            bottom: 20px;
            right: 15px;
        }

    </style>
}
@section Scripts{
    <script src="~/js/BeijingBianhua.js"></script>
    <script src="~/js/Top-frame.js"></script>
    <Script src="~/js/Square.js"></Script>
    <script src="~/js/PingLunQu.js"></script>
}



<div class="Content">
    <div class="Weizhi">
        <div class="Content-left">
            <div class="Content-left-top">
                <div class="touxiang">
                    <img src="~/TouXiang/@ViewBag.GRImg" alt="">
                    <h3>@ViewBag.GRName</h3>
                    <span>@ViewBag.GRJianJie</span>
                </div>
                <div class="shuju">
                    <div id="guanzhu">
                        <h4>@ViewBag.Weibo</h4>
                        <span>关注</span>
                    </div>
                    <div id="dongtai">
                        <h4>@ViewBag.FenSi</h4>
                        <span>动态</span>
                    </div>
                </div>
                <div class="grxinxi">
                    <input type="button" onclick="window.location='/Home/HomeIndex'" value="个人信息">
                </div>
            </div>
        </div>
        <div class="Content-centen">
            <div class="fabu-tanchu">
                <button onclick="FaBu()">发布文章</button>
            </div>
            <div class="centen-fabu-top" id="centen-fabu-top">

                <div class="centen-fabu">
                    <ul class="grid">
                        <li class="grid-cell-1">
                            <a href="#" onclick="WenZhang()">
                                <i class="iconfont icon-bianjiwenzhang_huaban"></i>发布文章
                            </a>
                        </li>
                        <li class="grid-cell-1">
                            <a href="#" onclick="TuPian()">
                                <i class="iconfont icon-tupian"></i>发布图片
                            </a>
                        </li>
                        <li class="grid-cell-1">
                            <a href="#" onclick="ShiPian()">
                                <i class="iconfont icon-shipinbofang"></i>发布视频
                            </a>
                        </li>
                    </ul>
                    <form action="/Home/Add" method="post" enctype="multipart/form-data">
                        <div id="wenben">
                            <textarea name="WenBen" id="WenBen" cols="30" rows="10" placeholder="请输入..."></textarea>
                        </div>

                        <div id="tupian">
                            <textarea name="MiaoSuTP" id="MiaoSuTP" cols="30" rows="10" placeholder="描述图片..."></textarea>
                            <img id="picimg" src="" alt="">
                        </div>

                        <div id="shipian">
                            <textarea name="MiaoSuSP" id="MiaoSuSP" cols="30" rows="10" placeholder="描述视频..."></textarea>
                            <video id="spvieo" src="" controls="controls"></video>
                        </div>

                        <div class="fabu">
                            <label id="WenJianBtn" >选择文件<input type="file" id="file1" name="name" value="" style="display:none;"/></label>
                            <input type="button" id="quxiao" onclick="QingKong()" name="name" value="取消" />
                            <input type="submit" id="fabuBtn" name="name" value="发布" />
                        </div>
                    </form>
                </div>

            </div>
            <!-- ------------------------------------------------------------------------ -->
            @foreach (var item in ViewBag.MusicList)
            {
                <div class="centen-xianshi">
                    <div class="centen-xianshi-dingwei">
                        <div id="xianshi-img">
                            <img src="~/TouXiang/@item.img" alt="">
                        </div>
                        <div id="xinxi">
                            <h4>@item.name</h4>
                            <span>@item.jianjie</span>
                        </div>
                        <div id="haoyou">
                            @if (@item.WBID != @ViewBag.WBID)
                            {
                                <button type="button" value="@item.WBID" onclick="AddHouYou(this.value)"><i class="iconfont icon-yonghukaihu"></i></button>
                            }
                        </div>
                    </div>
                    <div class="neirong">
                        <p>@item.WenBen</p>
                        @if (@item.TuPian != null)
                        {
                            <img src="~/TuPian/@item.TuPian" alt="Alternate Text" style="width:650px;height:auto;" />
                        }
                        @if (@item.ShiPian != null)
                        {
                            <video class="shipian1" controls="controls" style="width:650px;height:auto;">
                                <source src="~/shipian/@item.ShiPian" type="video/mp4" />
                            </video>
                        }
                    </div>
                    <div class="pinglun">
                        <button id="aixin"><i class="iconfont icon-aixin"></i>@item.XiHuan</button>
                        <button class="check-box" id="pinglun"><i class="iconfont icon-pinglun"></i>评论</button>
                        <button id="zhuanfa"><i class="iconfont icon-zhuanfa"></i>@item.ZhuanFa</button>
                        <button type="button" value="@item.PID" onclick="PingLun(this.value)"><i class="iconfont icon-shuaxin"></i>刷新</button>
                        <p id="pid" style="display:none;">@item.PID</p>
                        @if (@item.WBID == @ViewBag.WBID)
                        {
                            <button id="aixin" value="@item.PID"  onclick="Del(this.value)"><i class="iconfont icon-shanchu"></i>删除</button>
                        }
                    </div>
                    <div class="pinglunqu">
                        <div id="shurupl">
                            <input type="text" name="TjPl" id="zengjiapl_@item.PID" placeholder="输入评论..." required>
                            <button type="button" value="@item.PID" onclick=" AddPL(this.value)">评论</button>
                        </div>
                        <div id="xianshipl">
                            <ul id="xianshipl_@item.PID">

                            </ul>
                        </div>
                    </div>
                </div>
            }

        </div>


        <div class="Right-HouYou">
            <div class="Right-HouYou-top">
                <div id="HouYou-ShuaXin">
                    <span>好友</span>
                    <span id="DengLuid" style="display:none;">@ViewBag.WBID</span>
                    <button id="HYshuaXin" onclick="houyouxianshi"><i class="iconfont icon-shuaxin"></i></button>
                </div>
                <div id="HouYou-LieBiao">
                    <ul id="ZYHouYou">
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- ------------------------------------------------ -->
<script type="text/javascript">
    //显示图片方法
    //$(function () {
    //    $("#file1").on("change", function () {
    //        var file = this.files[0];

    //        if (this.files && file) {
    //            var reader = new FileReader();
    //            reader.onload = function (e) {
    //                $("#picimg").attr('src', e.target.result);
    //            }
    //            reader.readAsDataURL(file);
    //        }
    //    });
    //})

    //显示图片和视频方法
    $(function () {
        //监听input的change事件
        $("#file1").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            if (objUrl) {
                $("#picimg").attr("src", objUrl);
                $("#spvieo").attr("src", objUrl);
            }
        });

        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {
                // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    })
    function QingKong() {
        $('#WenBen').val('');
        $('#MiaoSuTP').val('');
        $('#MiaoSuSP').val('');
        $('#picimg').attr('src', '');
        $('#spvieo').attr('src', '');
        $('#file1').val('');
    }

    function Del(pid) {

        $.ajax({
            //访问路径
            url: "/Home/SquareDel",
            //请求values控制器中的post方法
            type: "Post",
            //参数
            data: { "pid":pid },
            success: function (data) {
                alert("删除成功");
                window.location.reload();
            }
        })
    }

    //页面启动时触发
    $.ajaxSetup({ async: false });
    $(document).ready(function () {
        houyouxianshi();
    })

    //显示好友列表
    function houyouxianshi() {
        var id = $("#DengLuid").text();
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/XianShiHouYou',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: { "id": id },
            success: function (data) {
                //请求成功函数内容
                /*console.log(data);*/
                var group = $.parseJSON(data);
                //拼接字符串
                var str = '';
                var bd = "'";
                //对数据做遍历，拼接到页面显示
                for (var i = 0; i < group.length; i++) {
                    str +=
                        '<li>' +
                        '<div id="LieBiao-haoyou">' +
                        '<img id="LieBiao-haoyou-touxiang" src="/TouXiang/' + group[i].img + '" alt="" />' +
                        '<span id="HaoYouName">' + group[i].name + '</span>' +
                        '<button id="HaoYouBtn" onclick="window.location.href =' + bd + '/Home/FriendsIndex/?WBID=' + group[i].WBID + bd + '"type="button"><i class="iconfont icon-yonghu"></i></button>' +
                        '</div>' +
                        '</li>';
                }
                //放入页面的容器显示
                $('#ZYHouYou').html(str);
            },
            error: function (jqxhr) {
                //请求失败函数内容
            }
        });
    }


    //显示评论列表
    function PingLun(id) {
        //console.log(id);
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/PLSelect',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: { "id": id },
            success: function (data) {
                //请求成功函数内容
                console.log(data);
                var group = $.parseJSON(data);
                //拼接字符串
                var str = '';
                //对数据做遍历，拼接到页面显示
                for (var i = 0; i < group.length; i++) {
                    str +=
                        '<li>' +
                        '<span>' + group[i].name + '&nbsp;:</span><span>' + group[i].plnr + '</span>' +
                        '</li>';
                }
                //放入页面的容器显示
                $('#xianshipl_' + id).html(str);
            },
            error: function (jqxhr) {
                //请求失败函数内容
            }
        });
    }


    //增加评论
    function AddPL(pid) {
        var addtxt = $('#zengjiapl_' + pid).val();
        console.log(addtxt);
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/ADDPL',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: { "PID": pid, "addtxt": addtxt },
            success: function (data) {
                if (data == true) {
                    alert("增加成功");
                } else {
                    alert("增加失败");
                }
            },
            error: function (jqxhr) {
                //请求失败函数内容
                alert("增加失败");
            }
        });
    }

    //增加好友
    function AddHouYou(gzID) {
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/AddHouYou',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: { "gzID": gzID },
            success: function (data) {
                if (data == 1) {
                    alert("增加成功");
                    houyouxianshi()
                } else if (data == 2) {
                    alert("好友已存在");
                } else {
                    alert("增加失败");
                }
            },
            error: function (jqxhr) {
                //请求失败函数内容
                alert("增加失败");
            }
        });
    }
</script>